<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
    <header><span onclick="showPost();">我要发帖</span></header>
    <section>
        <ul id="postList">
            <li>
                <div><img src="images/tou02.jpg"></div>
                <h1>ggggg</h1>
                <p><span>版块：新手报到</span><span>发表时间：2019-11-18 17:28</span></p>
            </li>
            <li>
                <div><img src="images/tou01.jpg"></div>
                <h1>ddddd</h1>
                <p><span>版块：新课来了</span><span>发表时间：2019-11-18 17:27</span></p>
            </li>
        </ul>
    </section>

    <div class="post">
        <input class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select>
        <option selected>请选择版块</option>
        <option>电子书籍</option>
        <option>新课来了</option>
        <option>新手报到</option>
        <option>职业规划</option>
    </select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布" onclick="doPost()">
    </div>
</div>

<script src="../js/jquery-3.4.1.min.js"></script>
<script>
    $().ready(function () {
        // 发帖按钮
        $("header span").click(function () {
            if ($(".post").css('display') == 'none') {
                $(".post").show();
            } else {
                $(".post").hide();
            }
        });
        var tou=new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg");
        $(".btn").click(function(){
            var $newLi=$("<li></li>");  //创建一个新的li节点元素
            var iNum=Math.floor(Math.random()*4);  //随机获取头像
            var $touImg=$("<div><img src=images/"+tou[iNum]+"></div>");  //创建头像节点
            var $title=$("<h1>"+$(".title").val()+"</h1>"); //设置标题节点
            var newP=$("<p></p>");  //创建一个新的p节点元素
            var myDate=new Date();
            var currentDate=myDate.getFullYear()+"-"+parseInt(myDate.getMonth()+1)+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes();
            $(newP).append("<span>版块："+$(".post select").val()+"</span>");  //在p节点中插入版块；
            $(newP).append("<span>发表时间："+currentDate+"</span>");     //在p节点中插入发布时间；
            $($newLi).append($touImg);  //插入头像
            $($newLi).append($title);   //插入标题
            $($newLi).append(newP);    //插入版块、时间内容
            $(".bbs section ul").prepend($newLi);

            $(".post .content").val("");
            $(".post .title").val("");
            $(".post").hide();


        });
    });

</script>

<!--<script>-->
<!--    var postFlag = false;-->

<!--    function showPost() {-->
<!--        if (postFlag == false) {-->
<!--            var d = document.getElementsByClassName("post")[0].style.display = "block";-->
<!--            postFlag = true;-->
<!--        } else if (postFlag == true) {-->
<!--            var d = document.getElementsByClassName("post")[0].style.display = "none";-->
<!--            postFlag = false;-->
<!--        }-->
<!--        clear();-->
<!--    }-->

<!--    function clear() {-->
<!--        document.getElementsByClassName("title")[0].value="";-->
<!--        document.getElementsByClassName("content")[0].value="";-->
<!--        //document.getElementsByTagName("select")[0].value="";-->
<!--        document.getElementsByTagName("select")[0].selectedIndex=0;-->

<!--    }-->

<!--    function doPost() {-->
<!--        //1:拿到输入的值:-->
<!--        var title = document.getElementsByClassName("title")[0].value;-->
<!--        var section = document.getElementsByTagName("select")[0].value;-->
<!--        var content = document.getElementsByClassName("content")[0].value;-->
<!--        // alert(title+section+content);-->

<!--        //2:随机数0-4-->
<!--        var touXiangImg=parseInt(Math.random()*4)+1;-->
<!--        //alert(touXiangImg);-->
<!--        var dataInfo=new Date().toLocaleString();-->

<!--        //3:创建元素加进去-->
<!--        var li=document.createElement("li");-->
<!--        var div=document.createElement("div");-->
<!--        var img=document.createElement("img");-->
<!--        var h1=document.createElement("h1");-->
<!--        var p=document.createElement("p");-->
<!--        var span1=document.createElement("span");-->
<!--        var span2=document.createElement("span");-->

<!--       img.setAttribute("src","images/tou0"+touXiangImg+".jpg");-->
<!--       div.appendChild(img);-->
<!--       h1.innerHTML=title;-->
<!--       //span1-->
<!--        span1.innerHTML="版块："+section;-->
<!--        p.appendChild(span1);-->
<!--       //span2-->
<!--        span2.innerHTML="发表时间："+dataInfo;-->
<!--        p.appendChild(span2);-->
<!--        //装填li-->
<!--        li.appendChild(div);-->
<!--        li.appendChild(h1);-->
<!--        li.appendChild(p);-->

<!--        document.getElementById("postList").appendChild(li);-->
<!--        showPost();-->
<!--        //document.getElementsByClassName("post")[0].style.display = "none";-->

<!--    }-->
<!--    function doPost2() {-->
<!--       //1:拿到输入的值:
					var title=document.getElementsByClassName("title")[0].value;
					var content=document.getElementsByClassName("content")[0].value;
					var bankuai=document.getElementsByTagName("select")[0].value;
					//alert(title+":"+content+":"+bankuai);
					//2:随机数,在[0-4]之间;时间
					var touxiangpos=parseInt(Math.random()*4)+1;
					let datestr=new Date().toLocaleString();

					var li=document.createElement("li");
					li.innerHTML="<div><img src='images/tou0"+touxiangpos+".jpg'></div><h1>"+title+"</h1><p><span>版块："+bankuai+"</span><span>发表时间："+datestr+"</span></p>";
					document.getElementById("postList").appendChild(li);
					showPost();//隐藏输入框
<       //document.getElementsByClassName("post")[0].style.display = "none";-->

<!--    }-->

<!--</script>-->

</body>
</html>